<template>
  <div class="gauge-chart-01 chart" ref="gaugeChart01Ref"></div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
const gaugeChart01Ref = ref(null);
const echarts = inject('$echarts');

const option = {
  compCode: 'C202312006',
  series: [
    {
      type: 'gauge',
      radius: '80%',
      center: ['50%', '60%'],
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      itemStyle: {
        color: '#58D9F9',
        shadowColor: 'rgba(0,138,255,0.45)',
        shadowBlur: 10,
        shadowOffsetX: 2,
        shadowOffsetY: 2,
      },
      progress: {
        show: true,
        roundCap: true,
        width: 25,
      },
      pointer: {
        show: false, // 设置刻度线不显示
      },
      axisLabel: {
        show: false, // 设置刻度标签不显示
      },
      splitLine: {
        show: false, // 设置分隔线不显示
      },
      axisTick: {
        show: false, // 设置刻度线不显示
      },
      axisLine: {
        roundCap: true,
        lineStyle: {
          color: [[1, '#0E366C']],
          width: 25,
        },
      },
      detail: {
        width: '50%',
        lineHeight: 20,
        height: 20,
        borderRadius: 0,
        offsetCenter: [0, '0%'],
        valueAnimation: true,
        formatter: function (value) {
          return '{value|' + value.toFixed(0) + '}{unit|%}\n{title|在线率}';
        },
        rich: {
          value: {
            fontSize: 50,
            fontWeight: 'bolder',
            color: '#01E0FC',
          },
          unit: {
            fontSize: 28,
            color: '#01E0FC',
            padding: [0, 0, -5, 3],
          },
          title: {
            fontSize: 28,
            color: '#01E0FC',
            padding: [0, 0, -30, 3],
          },
        },
      },
      data: [
        {
          value: 89,
        },
      ],
    },
  ],
}

onMounted(() => {
  const chart = echarts.init(gaugeChart01Ref.value);
  chart.setOption(option);
});
</script>